<script setup lang="ts">
import { toRef } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";

import Page from "@/components/common/Page.vue";
import ByIcon from "@/components/ui/ByIcon.vue";
import ContentBox from "../index/components/ContentBox.vue";

import useApp from "@/stores/app";
import { getUserInfo } from "@/api/login";

const stateApp = useApp();
const userInfo = toRef(stateApp, "userInfo");

useDidShow(() => getUserInfo());

// 商户入驻跳转URL
// const settledURL = ref("/packageMerchant/pages/settled/index");

// 获取商家审核状态
// useFetch<{
//   merchant_apply_detail: TMerchantInfo & { id: number; };
// }>(ApiMerchant.getAppMerchantApplyDetail, {
//   onSuccess(res) {
//     if (res.merchant_apply_detail.id)
//       settledURL.value = "/packageMerchant/pages/settled/result";
//   },
// }, {
//   hiddenToast: true
// });

const maskPhoneNumber = function (phoneNumber) {
  // 检查输入是否为有效手机号码
  if (/^\d{11}$/.test(phoneNumber)) {
    // 保留前三位和最后四位，中间用*号填充
    const stars = "*".repeat(phoneNumber.length - 7);
    return `${phoneNumber.slice(0, 3)}${stars}${phoneNumber.slice(-4)}`;
  }
};

const enums = [
  { icon: "Mobile", name: "联系客服", url: "/packageMain/pages/about/index" },
  {
    icon: "Setting",
    name: "设置",
    url: "/packageMine/pages/info/index",
    login: true,
  },
];

function navigateTo(item: (typeof enums)[number]) {
  const isLogin = stateApp.isLogined;
  const url = isLogin || !item.login ? item.url : "/pages/login/index";
  Taro.navigateTo({ url });
}
</script>

<template>
  <Page>
    <view class="px-3">
      <!-- S 头部 -->

      <ContentBox class="relative mt-8">
        <view class="flex items-center px-5 pb-10" @tap="navigateTo(enums[1])">
          <view class="flex-auto mr-10 text-dark">
            <view class="flex items-center justify-between mb-2 text-[48px]">
              <text>{{ stateApp.isLogined ? userInfo.nickname : "用户" }}</text>
              <ByIcon name="ArrowRight" :size="20" />
            </view>
            <view class="text-primary text-sm">
              {{
                stateApp.isLogined
                  ? maskPhoneNumber(userInfo.mobile || "")
                  : "未登录"
              }}
            </view>
          </view>

          <image
            :src="userInfo?.avatar || '/static/images/logo.png'"
            class="flex-none w-[200px] h-[200px] rounded-full"
          />
        </view>

        <!-- <navigator
          class="relative mt-8 mx-auto flex justify-between w-1/3 px-5 py-2 translate-y-1/2 text-sm rounded-full bg-dark text-light"
        >
          <view
            >我的订单
            <ByIcon name="ArrowRight" :size="20" />
          </view>
          <text>5</text>
        </navigator> -->
      </ContentBox>

      <view class="mt-10 mx-4">
        <view
          v-for="(item, index) in enums"
          :key="index"
          @tap="navigateTo(item)"
          class="flex items-center mt-3 px-4 py-2 bg-light text-dark rounded-full"
        >
          <ByIcon :name="item.icon" :size="32" />
          <view class="flex-auto mx-2">{{ item.name }}</view>
          <ByIcon name="ArrowRight" />
        </view>
      </view>
    </view>
  </Page>
</template>
